import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { Radio, Label, Switch } from 'iftide';


export default class Basic2 extends Component{
    constructor(props) {
        super(props);
        this.state = {
            Data2: [
                {label: '选项1', value: 1},
                {label: '选项2', value: 2},
                {label: '选项3', value: 3},
                {label: '选项4', value: 4, disabled: true},
            ],
            Index2: 0
        }
    }


    render(){

        return(
            <View>
                <View style={styles.label}>
                    <Label text = '单选样式二' fontWeight={'bold'} textDecorationLine={'underline'}/>
                </View>
                <Radio
                    labelBefore={true}
                    radio_props={this.state.Data2}
                    initial={this.state.Index2}
                    formHorizontal={false}
                    onPress={(index) => {this.setState({Index2: index})}}
                    disabled={false}
                    />
                <View style={styles.label}>
                    <Text>selected: {(this.state.Index2 !== -1) ? this.state.Data2[this.state.Index2].value : null}</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height: '100%',
    },
    label: {
        padding: 13,
        backgroundColor: '#F5F7F9',
        borderBottomWidth: 1,
        borderBottomColor: '#D8D8D8',
    },
});